<template>
  <div class="setupItem">
    <div class="setup" v-for="item in testArray" :key="item.id">
      <div class="setupTitle">{{ item.name }}</div>
      <div class="setupNum" @click="clickNum">{{ item.number }}</div>
      <div class="setupImg" @click="clickImg(item.testData)">
        <div class="setupImg_center"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useMainStore } from "../../../../store/index"

const store = useMainStore()
const testArray = [
  {
    id: 0,
    number: 3455,
    name: '立项阶段',
    testData: [
      {
        type: 'Feature',
        geometry: { type: 'Point', coordinates: [119.39185888457718, 28.353721277203988] },
      },
      {
        type: 'Feature',
        geometry: { type: 'Point', coordinates: [119.56538356894123, 27.875093656449806] },
      }
    ]
  },
  {
    id: 1,
    number: 9516,
    name: '预播阶段',
    testData: [
      {
        type: 'Feature',
        geometry: { type: 'Point', coordinates: [119.3263, 28.569896] },
      },
      {
        type: 'Feature',
        geometry: { type: 'Point', coordinates: [119.179113, 28.291863] },
      }
    ]
  },
  {
    id: 2,
    number: 9467,
    name: '验收阶段',
    testData: [
      {
        type: 'Feature',
        geometry: { type: 'Point', coordinates: [119.54888, 27.990817] },
      },
      {
        type: 'Feature',
        geometry: { type: 'Point', coordinates: [119.319392, 27.753973] },
      }
    ]
  },
  {
    id: 3,
    number: 2425,
    name: '结算阶段',
    testData: [
      {
        type: 'Feature',
        geometry: { type: 'Point', coordinates: [119.527496, 27.987822] },
      },
      {
        type: 'Feature',
        geometry: { type: 'Point', coordinates: [120.148814, 28.446336] },
      }
    ]
  }
]

const clickNum = () => {
  store.showModel = !store.showModel
  console.log('dfdfdf', store.showModel);
}

// 点击图片
const clickImg =(itemData)=>{
  // console.log('itemData',itemData);
  
  store.showPonit = true
  store.testArray = itemData
  // console.log('itemData',store.testArray);
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.setupItem {
  width: 335px;
  height: 100%;
  // border: 1px solid red;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .setup {
    width: 156px;
    height: 160px;
    // border: 1px solid red;

    .setupTitle {
      height: 28px;
      background-image: url("../../../../assets/lingshui/u44.png");
      background-size: 100% 100%;
      font-family: 'Acens ', 'Acens', sans-serif;
      font-size: 13px;
      color: #FFFFFF;
      font-style: normal;
      font-weight: 700;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .setupNum {
      font-size: 22px;
      height: 20px;
      color: #FAFF67;
      font-weight: 700;
      font-family: 'Agency FB Negreta', 'Agency FB Normal', 'Agency FB', sans-serif;
      text-align: center;
      cursor: pointer;
      // border: 1px solid red;
    }

    .setupImg {
      width: 100%;
      height: 110px;
      background-image: url("../../../../assets/lingshui/u48.png");
      background-size: 100% 110%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      // border: 1px solid red;


      .setupImg_center {
        width: 30px;
        height: 30px;
        background-image: url("../../../../assets/lingshui/u49.png");
        background-size: 100% 100%;
        margin-bottom: 20px;
      }
    }
  }
}
</style>